require('./index.css');
require('page/common/header/index.js');
require('page/common/calendar/bootstrap-datetimepicker.js');
require('page/common/calendar/bootstrap-datetimepicker.zh-CN.js');
require('page/common/calendar/index.js');
var _mm=require('util/mm.js');
var SintemplateIndex       = require('./single-choice.string');
var MultemplateIndex       = require('./multiple-choice.string');
var TxttemplateIndex       = require('./text-choice.string');
var item_s_templateIndex   = require('./single-choice-item.string');
var item_m_templateIndex   = require('./multiple-choice-item.string');
if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
           	}
if(storage.length==0)
	{
		var ques_list = {
			list_total : 0,
			list       : []	
		};
	}else{
		 var json=storage.getItem("ques_list");
         var ques_list=JSON.parse(json);
	}
/*新增与修改状态*/
var status = 'save';
var page = {
	init : function(){
		this.pullDownBtn();
		this.EventBind();
	},
	/*点击添加问题下拉框*/
	pullDownBtn : function(){
		$('.new-btn').click(function(){
			$(".add-question-btn").slideDown("slow");
		});
	},
	testSave : function(){
           	var d=JSON.stringify(ques_list);
            storage.setItem("ques_list",d);
           /* storage.clear();*/
           console.log(storage);
	},
	/*事件*/
	EventBind : function(){
		/*点击添加单选按钮*/
		var _this = this;
		$('#add-s-choice').off("click").on("click",function(){
			_this.SingleChoice();
			_this.refresh();
		});
		/*添加多选按钮*/
		$('#add-m-choice').off("click").on("click",function(){
			_this.multipleChoice(); 
			_this.refresh();
		});
		/*点击添加文本题*/
		$('#add-text').off("click").on("click",function(){
			_this.addText(); 
			_this.refresh();
		});
		$('#save-btn').off("click").on("click",function(){
			_this.saveQuesList(); 
			_this.refresh();
		}); 	
	},
	/*点击保存问卷*/
	saveQuesList : function(){
		_this = this;
		/*window.onscroll=function(){
  				document.body.scrollTop = 0
		}*/
		$('.input-envent').show();
		$('.mask').show();
		$('#cancel').click(function(){
			$('.input-envent').hide();
			$('.mask').hide();
			/*window.onscroll=function(){
  				document.body.scrollTop = offset;
			}*/
			return;
		});
		$('.input-envent .fa').click(function(){
			$('.input-envent').hide();
			$('.mask').hide();
			/*window.onscroll=function(){
  				document.body.scrollTop = offset;
			}*/
			return;
		});
		$('#confirm').off('click').on('click',function(){
			_this.saveJson();
			$('.input-envent').hide();
			$('.mask').hide();
			/*window.onscroll=function(){
  				document.body.scrollTop = offset;
			}*/
			return;
		});

	},
	/*当点击确认提交按钮后把当前页面上的内容保存到localstage中*/
	saveJson : function(){
		var ul =document.getElementById('question-list');
		var len = ul.getElementsByTagName('li');
		/**/
		var $len = $(len);
		var ques_all_index = {
						ques_status : '未发布',
						ques_total  : '',
						date        : '',
						title       : '',
						question    : []	
		};
		ques_all_index.ques_total = len.length;
		ques_all_index.date=$('.dateTime').val();
		ques_all_index.title=$('#ques-list-title').val();
		for(var i=0;i<len.length;i++)
			{
				/*判断是否为文本题*/
				if (len[i].getElementsByTagName('div')[0].getAttribute("id") == "text") {
					var ques_items = len[i].getElementsByClassName('ques-input');
						var ques_index = {
						ques_type     :   '',
						ques_title    :   '',
						ques_choice   :   [],
						ques_content  :  ''
					}
					ques_index.ques_type  = 'text';
					ques_index.ques_title =$(len[i]).find('.ques-title').val();
					ques_index.ques_content=$(len[i]).find('#textarea').val();
					ques_all_index.question.push(ques_index);
				}
				/*判断是否为多选题*/
				if (len[i].getElementsByTagName('div')[0].getAttribute("id") == "multiple-choice") {
					var ques_items = len[i].getElementsByClassName('ques-input');
						var ques_index = {
						ques_type     :   '',
						ques_title    :   '',
						ques_choice   :   [],
						ques_content  :  ''
					}
					ques_index.ques_type  = 'multiple';
					ques_index.ques_title =$(len[i]).find('.ques-title').val();
					console.log($($len[i]).find('.ques-title').val());
					for(var j=0;j<ques_items.length;j++)
						{
							ques_index.ques_choice.push(ques_items[j].value);
						}
					ques_all_index.question.push(ques_index);
				}
				/*判断是否为单选题*/
				if (len[i].getElementsByTagName('div')[0].getAttribute("id") == "single-choice") {
					var ques_items = len[i].getElementsByClassName('ques-input');
						var ques_index = {
						ques_type     :   '',
						ques_title    :   '',
						ques_choice   :   [],
						ques_content  :  ''
					}
					ques_index.ques_type  = 'single';
					ques_index.ques_title =$(len[i]).find('.ques-title').val();
					console.log($($len[i]).find('.ques-title').val());
					for(var j=0;j<ques_items.length;j++)
						{
							ques_index.ques_choice.push(ques_items[j].value);
						}
					ques_all_index.question.push(ques_index);
				}
			}
		if(status == 'save')
			{
				ques_list.list.push(ques_all_index);
				status = 'change';
			}
		else
			{
				console.log(22222222222);
				ques_list.list.splice(ques_list.list.length-1,1,ques_all_index);
			}
		
		console.log(ques_list);
		this.testSave();
	},
	/*刷新事件*/
	refresh  :  function(){
			this.showItem();
			this.delSinBtn();
			this.KeyEvent();
			this.moveDown();
			this.moveUp();
			this.deleteSinAll(); 
			this.copy();
			this.refreshQusNumber();
	},
	/*问题里面的添加单项按键事件*/
	KeyEvent : function(){
		//点击单选问题里面的添加选项按钮
		var _this=this;
		/*点击事件的累加在页面中为一个元素绑定事件，事件执行后页面未刷新且元素还在，然后你再次点击，元素又被绑定个一次点击事件，这样第二次点击就会执行两次，以此类推。*/
		$('#single-choice .choice-btn').off('click').on('click',function(){
			var $parent=$(this).parent().parent();
			var parent=$parent.get(0);
			var len = parent.getElementsByTagName('dd').length+1;
			if(len>=11)
			{
				alert('最多提交10个选项');
			}
			else{
				var data={
					number : len
				};
				var $dd = $('<dd></dd>');
				var singleHtml = '';
				singleHtml = _mm.renderHtml(item_s_templateIndex,data);
				$parent.append($dd);
				parent.getElementsByTagName('dd')[len-1].innerHTML=singleHtml;
			}
		_this.delSinBtn();	
		});
		/*点击添加单个单选项*/
		$('#multiple-choice .choice-btn').off('click').on('click',function(){
			var $parent=$(this).parent().parent();
			var parent=$parent.get(0);
			var len = parent.getElementsByTagName('dd').length+1;
			if(len>=11)
			{
				alert('最多提交10个选项');
			}
			else{
				var data={
					number : len
				};
				var $dd = $('<dd></dd>');
				var singleHtml = '';
				singleHtml = _mm.renderHtml(item_m_templateIndex,data);
				$parent.append($dd);
				parent.getElementsByTagName('dd')[len-1].innerHTML=singleHtml;
			}
		_this.delSinBtn();	
		});
	},
	/*添加选项里面的单项*/
	addChoiceItem : function(){

	},
	//点击删除选项，删除选项
	delSinBtn : function(){
		var _this=this;
		$('.del-btn').off("click").on("click",function(){
			var $parent=$(this).parent().parent().parent();
			var $remParent=$(this).parent().parent();
			var parent=$parent.get(0);
			var remParent=$remParent.get(0);
			parent.removeChild(remParent);
		});
	},
	/*添加选项函数*/
	addChoice    : function(SintemplateIndex){
		var ul =document.getElementById('question-list');
		var len = ul.getElementsByTagName('li').length+1;
		if(len>=11)
			{
				alert('最多提交10个问题');
			}
		else{
				var $li = $('<li></li>');
				var singleHtml = '';
				singleHtml = _mm.renderHtml(SintemplateIndex);
				$('.question-list').append($li);
				$("li:last-child").html(singleHtml);
				/*判断是哪一个问题隐藏上移和下移按键*/
				$("li .move-up").css("display","inline-block");
				$("li .move-down").css("display","inline-block");
				$("li:first-child .move-up").css("display","none");
				$("li:last-child .move-down").css("display","none");
			}
	},
	/*添加多选*/
	multipleChoice   : function(){
		this.addChoice(MultemplateIndex);
	},	
	/*添加单选*/
	SingleChoice : function(){
		this.addChoice(SintemplateIndex);
	},
	/*添加文本题*/
	addText          : function(){
		this.addChoice(TxttemplateIndex);
	},
	showItem  : function(){
		$('.ques-cont').mouseover(function(){
			$('.choice-btn').show();
			$('.del-btn').show();
			$('.ques-list-btn').show();
		});
		$('.ques-cont').mouseout(function(){
			$('.choice-btn').hide();
			$('.del-btn').hide();
			$('.ques-list-btn').hide();
		});
	},
	/*删除整个选项*/
	deleteSinAll : function(){
		    var _this=this; 
			$(' .delete-choice').off("click").on("click",function(){
			var $parent=$(this).parent().parent().parent().parent();
			var $remParent=$(this).parent().parent().parent();
			var parent=$parent.get(0);
			var remParent=$remParent.get(0);
			parent.removeChild(remParent);
			$("li .move-up").css("display","inline-block");
			$("li .move-down").css("display","inline-block");
			$("li:first-child .move-up").css("display","none");
			$("li:last-child .move-down").css("display","none");
			_this.refreshQusNumber();
		});
	},
	/*下移单选节点*/
	moveDown   : function(){
		var	_this= this;
		$('.ques-list-btn .move-down').off('click').on('click',function(){
			var $changeParent=$(this).parent().parent().parent();
				$changeParent2=$changeParent.clone(true);
			var $borther=$changeParent.next();
			var	$cccc=$borther.replaceWith($changeParent2);
			$changeParent.replaceWith($cccc);
			$("li .move-up").css("display","inline-block");
			$("li .move-down").css("display","inline-block");
			$("li:first-child .move-up").css("display","none");
			$("li:last-child .move-down").css("display","none");
			_this.deleteSinAll();
			_this.delSinBtn();
			_this.showItem();
			_this.refreshQusNumber();
		});
	},
	/*上移单选节点*/
	moveUp   : function(){
		var	_this= this;
		$('.ques-list-btn .move-up').off('click').on('click',function(){
			var $changeParent=$(this).parent().parent().parent();
				$changeParent2=$changeParent.clone(true);
			var $borther=$changeParent.prev();
			var	$cccc=$borther.replaceWith($changeParent2);
			$changeParent.replaceWith($cccc);
			$("li .move-up").css("display","inline-block");
			$("li .move-down").css("display","inline-block");
			$("li:first-child .move-up").css("display","none");
			$("li:last-child .move-down").css("display","none");
			_this.deleteSinAll();
			_this.delSinBtn();
			_this.showItem();
			_this.refreshQusNumber();
		});
	},
	/*复用*/
	copy   :  function(){
		var	_this= this;
		$('.ques-list-btn .copy-choice').off('click').on('click',function(){
			var $changeParent=$(this).parent().parent().parent();
				$changeParent2=$changeParent.clone(true);
				$changeParent2.insertAfter($changeParent);
			$("li .move-up").css("display","inline-block");
			$("li .move-down").css("display","inline-block");
			$("li:first-child .move-up").css("display","none");
			$("li:last-child .move-down").css("display","none"); 
			_this.deleteSinAll();
			_this.showItem();
			_this.delSinBtn();
			_this.refreshQusNumber();
		});
	},
	refreshQusNumber :function(){
		var ul =document.getElementById('question-list');
		var len = ul.getElementsByClassName('ques-number');
		for(var i=0;i<len.length;i++){
			len[i].innerHTML="Q"+(i+1);
		}
	}
};
$(function(){
    page.init();
});
module.exports = page;